<template>
  <div class="inputMainDiv" :style="!showBorder?'border:none':''">
    <slot name="perfix" class="slot"></slot>
    <div class="inputBox">
      <input type="text" ref="inputEle" class="inputControl" name="" v-model="lvalue" @blur="(e,a)=>{isfocus=false;$emit('blur',e,a)}" @focus="()=>{isfocus=true;$emit('focus')}" :readonly="readonly"/>
    </div>
    <div v-if="clearBtn && isfocus && value!==null && value!=='' && value!==undefined"
      style="position: absolute; height: 100%;display: flex;justify-content: center;align-items: center; right: 30px;"
      @mousedown="(event)=>{event.preventDefault();$emit('clear',event)}">
      <svg width="10" height="10" style="cursor: pointer;"  viewBox="0 0 5 5" >
        <path style="fill:var(--theme-primary-color)" d="M 4.7360274,4.257576 4.2597807,4.7338228 2.6414236,3.1154657 1.031886,4.7338228 0.55563919,4.257576 2.1784059,2.6480383 0.55563919,1.0296813 1.031886,0.5578442 2.6414236,2.1762013 4.2641904,0.5578442 4.7360274,1.034091 3.1176704,2.6480383 Z" id="text1" aria-label="×" />
      </svg>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;width:26px" :class="[isfocus?'borderFocus':'borderNoFocus']">
        <slot name="suffix" class="slot">
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    getFocus: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    clearBtn:{
      type: Boolean,
      default: true
    },
    showBorder:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      lvalue: this.value,
      isfocus: false
    }
  },
  watch:{
    value(val){
      this.lvalue = val
      this.$emit('valueChange',val);
      this.$emit('update:value',val);
    },
    lvalue(val){
      this.$emit('valueChange',val);
      this.$emit('update:value',val);
    }
  },
  mounted() {
    if (this.getFocus) {
      this.focus();
    }
  },
  methods: {
    focus() {
      this.$refs.inputEle.focus();
    }
  }
}
</script>

<style>
:root{
    --primary-color: var(--theme-primary-color, #4c535a) ;
    --obprimary-color: var(--theme-obprimary-color,white) ;
    --text-color: var(--theme-text-color, #4c535a) ;
    --disable-color: var(--theme-disable-color, #4c535a) ;
}
</style>
<style scoped>
.inputMainDiv{
    border: 1px solid var(--disable-color);
    border-radius: var(--theme-border-radius,2px);
    display: flex;
    width: 100%;
    height: 100%;
    background-color: white;
}
.inputMainDiv:focus-within{
    border: 1px solid var(--primary-color);
}
.rootDiv{
  display: inline-block;
}
input{
  border: none;
  background: none;
  padding:0;
}
input:focus{
  outline: none;
  border: none;
}
.inputBox{
  width: 100%;
  line-height: 100%;  
  margin: 0;
  padding:0 3px;
  cursor: text;  
}
.inputControl{
  width:100%;
  height: 100%;
  background-color: white;
  vertical-align: top;
}
.borderFocus{
  border-left: 1px solid var(--theme-primary-color);
}
.borderNoFocus{
  border-left: 1px solid var(--disable-color);
}
</style>